<template>
  <el-row :gutter="20">
    <el-col :md="16" :sm="24">
      <el-tabs v-model="activeTab">
        <el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
          <legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
        </el-tab-pane>
        <el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
          <line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
        </el-tab-pane>
      </el-tabs>

      <el-form label-width="150px" size="mini">
        <h3>{{ $t('stylegen.result') }}</h3>
        <el-card shadow="never">
          <el-form-item label="CSS">
            <el-input ref="result" v-model="inputResult" :rows="20" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="copyResult">{{ $t('stylegen.copy') }}</el-button>
            <el-button @click="resetConfig">{{ $t('stylegen.resetConfig') }}</el-button>
          </el-form-item>
        </el-card>
      </el-form>
    </el-col>

    <el-col :md="8" :sm="24">
      <div :style="{position: 'relative', top: `${exampleTop}px`}">
        <el-form inline style="line-height: 40px">
          <el-form-item :label="$t('stylegen.playAnimation')" style="margin: 0">
            <el-switch v-model="playAnimation" @change="onPlayAnimationChange"></el-switch>
          </el-form-item>
          <el-form-item :label="$t('stylegen.backgrounds')" style="margin: 0 0 0 30px">
            <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')"
                       :inactive-text="$t('stylegen.dark')"></el-switch>
          </el-form-item>
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1" title="测试发射器">
              <el-tabs v-model="tabActiveName" type="border-card">
                <el-tab-pane label="弹幕" name="danmu">
                  <el-form-item label="舰长类型" style="margin: 0">
                    <el-radio-group v-model="form.privilegeType" size="small">
                      <el-radio-button label="1">总督</el-radio-button>
                      <el-radio-button label="2">提督</el-radio-button>
                      <el-radio-button label="3">舰长</el-radio-button>
                      <el-radio-button label="0">无</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-checkbox v-model="form.isOwner" border label="主播" size="small"
                               style="margin: 5px 0 0 15px;"></el-checkbox>
                  <el-checkbox v-model="form.isFanGroup" border label="粉丝团" size="small"
                               style="margin: 5px 0 0 15px;"></el-checkbox>
                  <el-form-item v-show="form.isFanGroup" label="粉丝团设置" style="margin: 0">
                    <el-form-item label="勋章名" style="margin: 0">
                      <el-input
                          v-model="form.fansMedalName"
                          clearable
                          placeholder="留空则随机"
                          size="small"
                          style="width: 130px;">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="勋章等级" style="margin: 0 0 0 15px">
                      <el-input
                          v-model="form.fansMedalLevel"
                          placeholder=""
                          size="small"
                          style="width: 60px;"
                          type="number">
                      </el-input>
                    </el-form-item>
                  </el-form-item>
                  <br/>
                  <el-form-item label="用户名" style="margin: 0">
                    <el-input v-model="form.userName" clearable maxlength="16" placeholder="留空则随机生成"
                              show-word-limit size="small" style="max-width: 150px;"
                              type="text"></el-input>
                  </el-form-item>
                  <el-checkbox v-model="form.isEmoticon" border label="表情弹幕" size="small"
                               style="margin: 5px 0 0 15px;"></el-checkbox>
                  <el-form-item label="弹幕内容" style="margin: 0 0 0 0px">
                    <el-input v-model="form.content" :disabled="form.isEmoticon" clearable maxlength="40"
                              placeholder="留空则随机生成"
                              show-word-limit size="small" type="text"></el-input>
                  </el-form-item>
                  <el-form-item label="" style="margin: 0 0 0 5px">
                    <el-button size="small" type="primary" @click="sendTestMessage()">发送</el-button>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="礼物" name="gift">
                  <el-form-item label="礼物名称" style="margin: 0;">
                    <el-input v-model="giftForm.giftName" clearable placeholder="留空则随机生成"
                              show-word-limit size="small" style="max-width: 110px;" type="text"></el-input>
                  </el-form-item>
                  <el-form-item label="数量" style="margin: 0 0 0 10px;">
                    <el-input-number v-model="giftForm.num" :max="1000" :min="0" size="small"></el-input-number>
                  </el-form-item>
                  <el-form-item label="单价(元)" style="margin: 0 0 0 10px;">
                    <el-input v-model="giftForm.singlePrice" clearable placeholder="留空随机"
                              show-word-limit size="small" style="max-width: 100px;" type="number"></el-input>
                  </el-form-item>
                  <el-form-item label="用户名" style="margin: 0">
                    <el-input v-model="giftForm.authorName" clearable maxlength="16" placeholder="留空则随机生成"
                              show-word-limit size="small" style="max-width: 150px;"
                              type="text"></el-input>
                  </el-form-item>
                  <el-form-item label="" style="margin: 0 0 0 10px">
                    <el-button size="small" type="primary" @click="sendGiftMessage()">发送</el-button>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="SC" name="superchat">
                  <el-form-item label="用户名" style="margin: 0">
                    <el-input v-model="superChatForm.authorName" clearable maxlength="16" placeholder="留空则随机生成"
                              show-word-limit size="small" style="max-width: 150px;"
                              type="text"></el-input>
                  </el-form-item>
                  <el-form-item label="SC内容" style="margin: 0 0 0 10px">
                    <el-input v-model="superChatForm.content" autosize clearable maxlength="100"
                              placeholder="留空则随机生成" show-word-limit size="small" style="max-width: 200px;" type="text"></el-input>
                  </el-form-item>
                  <el-form-item label="金额" style="margin: 0 0 0 10px">
                    <el-select v-model="superChatForm.price" placeholder="请选择" size="small" style="max-width: 90px;">
                      <el-option
                          v-for="item in superchatPrice"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" style="margin: 0 0 0 10px">
                    <el-button size="small" type="primary" @click="sendSuperChatMessage()">发送</el-button>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="上舰" name="member">
                  <el-form-item label="用户名" style="margin: 0">
                    <el-input v-model="memberForm.authorName" clearable maxlength="16" placeholder="留空则随机生成"
                              show-word-limit size="small" style="max-width: 150px;"
                              type="text"></el-input>
                  </el-form-item>
                  <el-form-item label="舰长类型" style="margin: 0 0 0 10px">
                    <el-radio-group v-model="memberForm.privilegeType" size="small">
                      <el-radio-button label="1">总督</el-radio-button>
                      <el-radio-button label="2">提督</el-radio-button>
                      <el-radio-button label="3">舰长</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="" style="margin: 0 0 0 10px">
                    <el-button size="small" type="primary" @click="sendMemberMessage()">发送</el-button>
                  </el-form-item>
                </el-tab-pane>
              </el-tabs>
            </el-collapse-item>
          </el-collapse>
        </el-form>
        <div id="example-container" :class="{light: exampleBgLight}">
          <div id="fakebody">
            <room ref="room"></room>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import _ from 'lodash'

import Legacy from './Legacy'
import LineLike from './LineLike'
import Room from '@/views/Room'

import {getUuid4Hex} from '@/utils'
import {
  randomChoose,
  nameList,
  contentList,
  medalNameList,
  giftInfoList,
  emoticonsList
} from "@/api/chat/ChatClientTest";
import * as constants from "@/components/ChatRenderer/constants";
import fa from "element-ui/src/locale/lang/fa";

export default {
  name: 'StyleGenerator',
  components: {
    Legacy, LineLike, Room
  },
  data() {
    let styleElement = document.createElement('style')
    document.head.appendChild(styleElement)
    // 数据流：
    //                                                   输入框 --\
    // 子组件 -> subComponentResults -> subComponentResult -> inputResult -> 防抖延迟0.5s后 -> debounceResult -> exampleCss
    return {
      // 子组件的结果
      subComponentResults: {
        legacy: '',
        lineLike: ''
      },
      activeTab: 'legacy',
      // 输入框的结果
      inputResult: '',
      // 防抖后延迟变化的结果
      debounceResult: '',
      activeNames: [],
      tabActiveName: 'danmu',
      styleElement,
      exampleTop: 0,
      playAnimation: true,
      exampleBgLight: false,
      superchatPrice: [
        {
          value: 30,
          label: '30元'
        },
        {
          value: 50,
          label: '50元'
        },
        {
          value: 100,
          label: '100元'
        },
        {
          value: 200,
          label: '200元'
        },
        {
          value: 500,
          label: '500元'
        },
        {
          value: 1000,
          label: '1000元'
        },
        {
          value: 2000,
          label: '2000元'
        }
      ],
      form: {
        privilegeType: 3,
        isOwner: false,
        isFanGroup: false,
        content: '',
        isEmoticon: false,
        userName: '',
        fansMedalName: '',
        fansMedalLevel: 0
      },
      giftForm: {
        authorName: '',
        singlePrice: null,
        giftName: '',
        num: 1
      },
      memberForm: {
        authorName: '',
        privilegeType: 3,
      },
      superChatForm: {
        authorName: '',
        price: 30,
        content: '',
        translation: ''
      }
    }
  },
  computed: {
    // 子组件的结果
    subComponentResult() {
      return this.subComponentResults[this.activeTab]
    },
    // 应用到预览上的CSS
    exampleCss() {
      return this.debounceResult.replace(/^body\b/gm, '#fakebody')
    }
  },
  watch: {
    subComponentResult(val) {
      this.inputResult = val
    },
    inputResult: _.debounce(function (val) {
      this.debounceResult = val
    }, 500),
    exampleCss(val) {
      this.styleElement.innerText = val
    }
  },
  mounted() {
    this.debounceResult = this.inputResult = this.subComponentResult

    this.$parent.$el.addEventListener('scroll', this.onParentScroll)
  },
  beforeDestroy() {
    this.$parent.$el.removeEventListener('scroll', this.onParentScroll)

    document.head.removeChild(this.styleElement)
  },
  methods: {
    onParentScroll(event) {
      if (document.body.clientWidth <= 992) {
        this.exampleTop = 0
      } else {
        this.exampleTop = event.target.scrollTop
      }
    },
    onPlayAnimationChange(value) {
      if (value) {
        this.$refs.room.start()
      } else {
        this.$refs.room.stop()
      }
    },
    copyResult() {
      this.$refs.result.select()
      document.execCommand('Copy')
    },
    resetConfig() {
      this.$refs[this.activeTab].resetConfig()
      this.inputResult = this.subComponentResult
    },
    sendTestMessage() {
      let authorType, medalName, message;
      if (this.form.isOwner === true) {
        authorType = 3
      } else if (this.form.privilegeType != 0) {
        authorType = 1
      } else {
        authorType = 0
      }
      if (this.form.isFanGroup === true) {
        medalName = (this.form.fansMedalName !== "") ? this.form.fansMedalName : randomChoose(medalNameList())
      } else {
        medalName = ""
      }
      if (this.form.isEmoticon === false) {
        message = {
          id: getUuid4Hex(),
          avatarUrl: "//static.hdslb.com/images/member/noface.gif",
          authorName: (this.form.userName !== "") ? this.form.userName : randomChoose(nameList()),
          authorType: authorType,
          content: (this.form.content !== "") ? this.form.content : randomChoose(contentList()),
          privilegeType: parseInt(this.form.privilegeType),
          medalName: medalName,
          medalLevel: parseInt(this.form.fansMedalLevel),
          isFanGroup: this.form.isFanGroup,
          translation: '',
          emoticon: null
        }
      } else {
        message = {
          id: getUuid4Hex(),
          avatarUrl: "//static.hdslb.com/images/member/noface.gif",
          authorName: (this.form.userName !== "") ? this.form.userName : randomChoose(nameList()),
          authorType: authorType,
          content: '',
          privilegeType: parseInt(this.form.privilegeType),
          medalName: medalName,
          medalLevel: parseInt(this.form.fansMedalLevel),
          isFanGroup: this.form.isFanGroup,
          translation: '',
          emoticon: randomChoose(emoticonsList())
        }
      }
      // console.log(typeof message.content)
      this.$refs.room.onAddText(message)
    },
    sendGiftMessage() {
      let randomGiftInfo;
      if (this.giftForm.giftName === '' || this.giftForm.singlePrice === null) {
        randomGiftInfo = randomChoose(giftInfoList())
      }
      const message = {
        id: getUuid4Hex(),
        avatarUrl: "//static.hdslb.com/images/member/noface.gif",
        time: Date.now(),
        authorName: (this.giftForm.authorName !== "") ? this.giftForm.authorName : randomChoose(nameList()),
        authorNamePronunciation: '',
        totalCoin: (this.giftForm.singlePrice !== null) ? this.giftForm.singlePrice * this.giftForm.num * 1000 : randomGiftInfo['price'] * this.giftForm.num * 1000,
        giftName: (this.giftForm.giftName !== "") ? this.giftForm.giftName : randomGiftInfo['giftName'],
        num: this.giftForm.num
      }
      this.$refs.room.onAddGift(message)
    },
    sendMemberMessage() {
      let randomAuthorName;
      if (this.memberForm.authorName === "") {
        randomAuthorName = randomChoose(nameList())
      }
      const message = {
        id: getUuid4Hex(),
        avatarUrl: "//static.hdslb.com/images/member/noface.gif",
        time: Date.now(),
        authorName: (this.memberForm.authorName !== "") ? this.memberForm.authorName : randomAuthorName,
        privilegeType: parseInt(this.memberForm.privilegeType),
        title: (this.memberForm.authorName !== "") ? this.memberForm.authorName : randomAuthorName
      }
      this.$refs.room.onAddMember(message)
    },
    sendSuperChatMessage() {
      const message = {
        id: getUuid4Hex(),
        avatarUrl: "//static.hdslb.com/images/member/noface.gif",
        authorName: (this.superChatForm.authorName !== "") ? this.superChatForm.authorName : randomChoose(nameList()),
        price: this.superChatForm.price,
        time: Date.now(),
        content: (this.superChatForm.content !== "") ? this.superChatForm.content : randomChoose(contentList()),
        translation: this.superChatForm.translation
      }
      this.$refs.room.onAddSuperChat(message)
    }
  }
}
</script>

<style scoped>
h3 {
  color: #ffffff;
}

#example-container {
  height: calc(100vh - 320px);

  background-color: #444;
  background-image: -moz-linear-gradient(45deg, #333 25%, transparent 25%),
  -moz-linear-gradient(-45deg, #333 25%, transparent 25%),
  -moz-linear-gradient(45deg, transparent 75%, #333 75%),
  -moz-linear-gradient(-45deg, transparent 75%, #333 75%);
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #333), color-stop(.25, transparent)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #333), color-stop(.25, transparent)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #333)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #333));

  -moz-background-size: 32px 32px;
  background-size: 32px 32px;
  -webkit-background-size: 32px 32px;

  background-position: 0 0, 16px 0, 16px -16px, 0px 16px;

  padding: 25px;

  resize: both;
  overflow: hidden;
}

#example-container.light {
  background-color: #ddd;
  background-image: -moz-linear-gradient(45deg, #eee 25%, transparent 25%),
  -moz-linear-gradient(-45deg, #eee 25%, transparent 25%),
  -moz-linear-gradient(45deg, transparent 75%, #eee 75%),
  -moz-linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #eee), color-stop(.25, transparent)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #eee), color-stop(.25, transparent)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #eee)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #eee));
}

#fakebody {
  outline: 1px #999 dashed;
  height: 100%;
}

</style>
